import React, { useState, useEffect } from "react";
import Taro from "@tarojs/taro";
import { View, Image, Text } from "@tarojs/components";
import "./soldGoodsList.scss";
// eslint-disable-next-line import/first
import GoodsList from "@/src/pages/pages-sold/components/goods-list/GoodsList";
// eslint-disable-next-line import/first
import CheckedIcon from "@/src/static/images/checked.png";
// eslint-disable-next-line import/first
import UnCheckedIcon from "@/src/static/images/un-checked.png";

const goods = {
  shop_type: "1",
  type: "2",
  sub_order_id: "378373810000250",
  addtime: "2021-03-04 16:22:59",
  finish_time: "1970-01-01 00:00:00",
  state_code: "1201",
  price: "0.04",
  pay_price: "0.04",
  is_cross_border: "N",
  has_sku_in_sold: "N",
  seller_id: "838",
  exists_express: "N",
  express_cost: "0.00",
  order_total_price: "0.04",
  order_total_pay_price: "0.04",
  address: {
    name: "哈哈哈哈",
    phone: "13051131325",
    region: "天津市-天津市-和平区",
    address: "323232322323",
    real_name: "",
    id_card: "",
  },
  shop_info: { name: "无名小店", shop_id: "431" },
  sku_m: [
    {
      type: "2",
      cate_id: "1220",
      id: "6705",
      goods_id: "1623727900006",
      goods_name: "小刀",
      goods_cover:
        "https://img.jjbangbang.com/test/image/bdc6bd7560ee17bae6198c52926d79d6.jpg",
      sku_id: "3030",
      sku_name: "红,20",
      sku_price: "0.02",
      pay_price: "0.02",
      sku_count: "1",
      state_code: "1701",
      sold_state_code: "0",
      sold_expire_time: "1970-01-01 00:00:00",
      sold_id: "0",
      express_id: "0",
      available_refund_amount: "0.02",
      gifts: [],
      ischecked: false,
    },
    {
      type: "2",
      cate_id: "1220",
      id: "6704",
      goods_id: "1623727900006",
      goods_name: "小刀",
      goods_cover:
        "https://img.jjbangbang.com/test/image/bdc6bd7560ee17bae6198c52926d79d6.jpg",
      sku_id: "3031",
      sku_name: "蓝,30",
      sku_price: "0.02",
      pay_price: "0.02",
      sku_count: "1",
      state_code: "1701",
      sold_state_code: "0",
      sold_expire_time: "1970-01-01 00:00:00",
      sold_id: "0",
      express_id: "0",
      available_refund_amount: "0.02",
      gifts: [],
      ischecked: false,
    },
  ],
  retailer_weibo_id: 0,
};

const styles = {
  allCheck: { width: "20px", height: "20px", marginRight: "5px" },
};

/* 申请批量售后 */
const SoldGoodsList = () => {
  const [isCheckAll, setIsCheckAll] = useState(false);
  const [skuList, setSkuList] = useState(goods.sku_m);
  let newSkuList = JSON.parse(JSON.stringify(skuList));

  useEffect(() => {
    if (isCheckAll) {
      newSkuList.forEach((sku) => {
        sku.ischecked = true;
      });
    } else {
      newSkuList.forEach((sku) => {
        sku.ischecked = false;
      });
    }
    setSkuList(newSkuList);
  }, [isCheckAll]);

  const handleClickSku = (clickIndex) => {
    newSkuList[clickIndex].ischecked = !newSkuList[clickIndex].ischecked;
    setSkuList(newSkuList);
    // let isAllChecked: boolean = newSkuList.every((sku: any) => {
    //   return sku.ischecked === true;
    // });
    // isAllChecked ? setIsCheckAll(true) : setIsCheckAll(false);
  };
  const clickAll = () => {
    setIsCheckAll(!isCheckAll);
  };
  const goSold = () => {
    let selectedList = skuList.filter((sku) => {
      return sku.ischecked === true;
    });
    if (selectedList.length > 0)
      Taro.showToast({
        title: "成功",
        icon: "none",
        duration: 2000,
      });
    else
      Taro.showToast({
        title: "请选择商品",
        icon: "none",
        duration: 2000,
      });
  };
  return (
    <View className="container">
      <GoodsList
        checkedAll={isCheckAll}
        skuList={skuList}
        clickSku={(idx) => {
          handleClickSku(idx);
        }}
      />
      <View className="footer">
        <View className="all-check" onclick={clickAll}>
          {isCheckAll ? (
            <Image
              style="width: 20px;height: 20px;margin-right: 5px"
              src={CheckedIcon}
            />
          ) : (
            <Image style={styles.allCheck} src={UnCheckedIcon}></Image>
          )}
          <Text>全选</Text>
        </View>
        <View className="white-font" onclick={goSold}>
          确认
        </View>
      </View>
    </View>
  );
};

export default SoldGoodsList;
